<template>
  <div class="again">
    <div class="againleft">
      <slot name="left"></slot>
    </div>
    <!--  @mousemove="changeChecked"高频事件不建议使用 -->
    <div class="againright">
      <slot name="right"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "HeaderBar",
  methods: {
    // changeChecked(event) {
    //   console.log(event);
    // },
  },
};
</script>

<style lang="less">
.again {
  width: 1226px;
  height: 58px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  .againleft {
    font-size: 22px;
    font-weight: 200;
  }
  .againright {
    font-weight: 300;
    display: flex;
    a {
      color: black;
      margin-left: 25px;
      display: block;
      height: 23px;
      box-sizing: border-box;
    }
    a:hover {
      color: #ff6700;
      border-bottom: 2px solid #ff6700;
    }
  }
}
</style>